<template>
  <div class="order-detail-box">
    <Title>
      <template v-slot:center>订单详情</template>
    </Title>
    <div class="order-status">
      <div class="status-item">
        <label>订单状态：</label>
        <span>{{ statusString }}</span>
      </div>
      <div class="status-item">
        <label>订单编号：</label>
        <span>{{ detail.order_no }}</span>
      </div>
      <div class="status-item">
        <label>下单时间：</label>
        <span>{{ detail.created_at }}</span>
      </div>

      <van-button
          v-if="detail.status == 1"
          @click="showPayFn"
          style="margin-bottom: 10px"
          color="#1baeae"
          block
      >去支付</van-button
      >
      <van-button v-if="detail.status == 2" @click="handleConfirmOrder" block
      >确认订单</van-button
      >
    </div>
    <div class="order-price">
      <div class="price-item">
        <label>商品金额：</label>
        <span>¥ {{ total + ".00" }}</span>
      </div>
      <div class="price-item">
        <label>配送方式：</label>
        <span>普通快递</span>
      </div>
    </div>

    <van-card
        v-for="item in detail.orderDetails.data"
        :key="item.id"
        :num="item.num"
        :price="item.price + '.00'"
        desc="全场包邮"
        :title="item.goods.title"
        :thumb="item.goods.cover_url"
    />

    <div style="width: 100%; height: 50px"></div>

    <van-popup v-model:show="showPay" position="bottom" :style="{ height: '40%' }" closeable>
      <div :style="{ width: '90%', margin: '0 auto', padding: '50px 0' }">
        <van-grid :border="false" :column-num="2">
          <van-grid-item text="支付宝">
            支付宝二维码<br />
            <van-image width="150" height="150" :src="aliyun" />
          </van-grid-item>
          <van-grid-item text="微信支付">
            微信二维码<br />
            <van-image width="150" height="150" :src="wechat" />
          </van-grid-item>
        </van-grid>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Title from "../../components/common/title/Title";
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, reactive, toRefs} from "vue";
import {Toast,Dialog} from "vant";
import {getOrderDetail, payOrder, payOrderStatus,confirmOrder} from "../../network/order";

export default {
  components:{Title},
  setup(){
    const router=useRouter();
    const route=useRoute();
    const state=reactive({
      orderNum:'',
      detail:{
        orderDetails:{
          data:[]
        },
        status:0
      },
      showPay:false,
      aliyun:'',
      wechat:''
    })
    const init=()=>{
      const {id}=route.query;
      state.orderNum=id;
      getOrderDetail(id).then(res=>{
        state.detail=res
      })
    }
    onMounted(()=>{
      Toast.loading({message:'加载中...',forbidClick:true})
      init()
      Toast.clear()
    })
    const statusString=computed(()=>{
      //1下单 2支付 3发货 4收货 5过期
      let status=['','已下单','已支付','等待发货','确认收货','已过期'];
      return status[state.detail.status]
    })
    const total=computed(()=>{
      let sum=0;
      state.detail.orderDetails.data.forEach(i=>{
        sum+=i.num * i.price
      })
      return sum
    })
    const showPayFn=()=>{
      state.showPay=true;
      payOrder(state.orderNum,{type:'aliyun'}).then(res=>{
        state.aliyun=res.qr_code_url
        state.wechat=res.qr_code_url
      })
      const timer=setInterval(()=>{
        payOrderStatus(state.orderNum).then(res=>{
          if(res=='2'){
            clearInterval(timer)
            state.showPay=false
            router.push({path:'/orderdetail',query:{id:state.orderNum}})
          }

        })
      },2000)
    }
    const handleConfirmOrder=()=>{
      Dialog.confirm({
        title:'是否确认订单'
      }).then(()=>{
        confirmOrder(state.orderNum).then(res=>{

          Toast('确认成功')
          init()
        })
      }).catch(()=>{

      })
    }
    const close=()=>{
      Dialog.close()
    }
    return{...toRefs(state),total,statusString,showPayFn,handleConfirmOrder,close}

  }
}
</script>

<style lang="scss" scoped>
.order-detail-box {
  text-align: left;
  background: #f7f7f7;
  .order-status {
    background: #fff;
    margin-top: 44px;
    padding: 20px;
    font-size: 15px;
    .status-item {
      margin-bottom: 10px;
      label {
        color: #999;
      }
      span {
      }
    }
  }
  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;
    .price-item {
      margin-bottom: 10px;
      label {
        color: #999;
      }
      span {
      }
    }
  }
  .van-card {
    margin-top: 0;
  }
  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>